<template>
  <div class="app-view-container">
    <mu-appbar class="app-popup-topbar" title="编辑纪念日">
      <mu-raised-button class="size-s" label="取消" slot="left" @click.native="cancel()"/>
      <mu-raised-button class="size-s" label="确认" slot="right" primary  @click.native="updateData()"/>
    </mu-appbar>
    <div class="app-popup-content">
      <vue-form :state="formstate">
        <mu-list class="app-list">
          <mu-flexbox style="max-width: 500px;margin:auto;padding:10px">
            <mu-flexbox-item :style="itemData.type==1?{'border-bottom':'2px solid #1b94d6'}:''" @click.native="itemData.type=1">
              <text-img-box title="生日">
                <img src="../assets/images/sign_birthday.png">
              </text-img-box>
            </mu-flexbox-item>
            <mu-flexbox-item :style="itemData.type==2?{'border-bottom':'2px solid #1b94d6'}:''" @click.native="itemData.type=2">
              <text-img-box title="家庭日">
                <img src="../assets/images/sign_family.png">
              </text-img-box>
            </mu-flexbox-item>
            <mu-flexbox-item :style="itemData.type==3?{'border-bottom':'2px solid #1b94d6'}:''" @click.native="itemData.type=3">
              <text-img-box title="结婚纪念日">
                <img src="../assets/images/sign_marry.png">
              </text-img-box>
            </mu-flexbox-item>
            <mu-flexbox-item :style="itemData.type==0?{'border-bottom':'2px solid #1b94d6'}:''" @click.native="itemData.type=0">
              <text-img-box title="其他纪念日">
                <img src="../assets/images/sign_other.png">
              </text-img-box>
            </mu-flexbox-item>
          

          </mu-flexbox>
        </mu-list>
        <mu-list class="app-list">
          <validate>
            <mu-text-field hintText="请输入纪念内容" name="commemorateName" v-model="itemData.commemorateName" fullWidth :underlineShow="false" class="item-insert" required='required' :errorText="showError?matchError(formstate,'commemorateName',{required:'必填'}):''"/>
          </validate>
          <mu-divider/>
          <mu-list-item title="纪念日期" @click="$refs.label_commemorateDate.click()">
            <label slot="after" ref="label_commemorateDate" class="datetime-label">{{dateFormat(itemData.commemorateDate,'YYYY-MM-DD 星期w')}}<mu-icon value="date_range" class="icon_date"/><mu-date-picker class="item-hidden-input" v-model="itemData.commemorateDate"/></label>
          </mu-list-item>
          <mu-divider/>
          <mu-list-item disableRipple title="农历">
            <label slot="after" class="datetime-label">{{itemData.commemorateDate&&(lunarObj.IMonthCn+lunarObj.IDayCn)}}<mu-icon value="date_range" class="icon_date" color="#8a8c8f" name="lunarCalendar" /></label>
          </mu-list-item>
          <mu-divider/>
          <mu-list-item @click="itemData.isRemind=!itemData.isRemind" title="是否提醒">
            <mu-switch v-model="itemData.isRemind"  slot="right"/>
          </mu-list-item>
          <mu-divider/>
          <validate>
            <mu-text-field hintText="请输入提醒天数" name="remindAheadDay" v-model="itemData.remindAheadDay" fullWidth :underlineShow="false" class="item-insert"/>
          </validate>
          <mu-divider/>
          <mu-list-item @click="itemData.status=!itemData.status" title="开放状态">
            <mu-switch v-model="itemData.status"  slot="right"/>
          </mu-list-item>
        </mu-list>
        <mu-list class="app-list">
          <mu-sub-header>备注</mu-sub-header>
          <mu-text-field hintText="请输入备注" name="commemorateMemo" v-model="itemData.commemorateMemo" fullWidth multiLine :underlineShow="false" :rows="2" :rowsMax="5" class="item-insert"/>
        </mu-list>
      </vue-form>
    </div>
  </div>
</template>

<script>
import {dateFormat} from 'scripts/common'
import LunarCalendar from 'scripts/LunarCalendar'
import textImgBox from 'components/textImgBox'
import services from 'services'
export default {
  data () {
    return {
      itemData:{'id':'','commemorateName':'','commemorateDate':'','lunarCalendar':'','type':0,'isRemind':false,'remindAheadDay':'','commemorateMemo':'','status':0},
      fileCategorys:[],
      showInput:{},
      formstate:{},
      showError:false
    }
  },
  computed:{
    cateNameList (){
      return this.fileCategorys.map(function(x){return {label:x.name,nativeValue:x.name} })
    },
    lunarObj (){
      return LunarCalendar.solar2lunar(new Date(this.itemData.commemorateDate).getFullYear(),new Date(this.itemData.commemorateDate).getMonth()+1,new Date(this.itemData.commemorateDate).getDate());
    }
  },
  components:{
    "text-img-box":textImgBox
  },
  mounted () {
    for (var i=1; i <= 2; i++) {
     this.$set(this.showInput,'ipt'+i,false);
    }
    this.getData()
  },
  beforeRouteUpdate (to,form,next){
    this.getData();
    next()
  },
  methods: {
    getData (){
      if (this.$route.params.action=='edit') {
        var vm=this
        //获取纪念日信息
        services.AnniversaryService.getAnniversary({
          data:{
            id: vm.$route.params.id
          },
          success:(data)=>{
            vm.itemData=data
            vm.itemData.commemorateDate=dateFormat(vm.itemData.commemorateDate,'YYYY-MM-DD')
          }
        })
      }
    },
    cancel (){
      this.$root.$router.back()
    },
    updateData (){
      var vm=this
      if (vm.formstate.$invalid) {
        vm.showError=true
        return
      } 
      vm.setLoading(true)
      
      /*vm.luDates = LunarCalendar.solar2lunar(new Date(this.itemData.commemorateDate).getFullYear(),new Date(this.itemData.commemorateDate).getMonth()+1,new Date(this.itemData.commemorateDate).getDate());*/
      
      vm.lunDate = vm.itemData.commemorateDate&&(vm.lunarObj.IMonthCn+vm.lunarObj.IDayCn);

      //更新纪念日信息
      if (this.$route.params.action=='edit') {
        var sta = vm.itemData.status == false ? 0:1;
      console.log(sta);
       services.AnniversaryService.updateAnniversary({
          type: 'post',
          data:{
            id: vm.itemData.id,commemorateName: vm.itemData.commemorateName,commemorateDate: vm.itemData.commemorateDate,lunarCalendar: vm.lunDate,type: vm.itemData.type,isRemind: vm.itemData.isRemind,remindAheadDay: vm.itemData.remindAheadDay,commemorateMemo: vm.itemData.commemorateMemo,status: sta
           },
          success:(data)=>{
            vm.showToast('保存成功！',600,vm.cancel)
          },
          error:()=>{
            vm.showToast('更新失败，请重试')
          },
          complete:()=>{
            vm.setLoading(false)
          }
        })
     }else{
      //添加纪念日
      var sta = vm.itemData.status == false ? 0:1;
      console.log(sta);
        services.AnniversaryService.addAnniversary({
          type: 'post',
          data:{
            commemorateName: vm.itemData.commemorateName,commemorateDate: vm.itemData.commemorateDate,lunarCalendar: vm.lunDate,type: vm.itemData.type,isRemind: vm.itemData.isRemind,remindAheadDay: vm.itemData.remindAheadDay,commemorateMemo: vm.itemData.commemorateMemo,status: sta
           },
          success:(data)=>{
            vm.showToast('保存成功！',600,vm.cancel)
          },
          error:()=>{
            vm.showToast('更新失败，请重试')
          },
          complete:()=>{
            vm.setLoading(false)
          }
        })
     }


    },
    dateFormat,
    setLoading (isLoading){  this.$store.dispatch('setLoading',isLoading) },
    showToast (toastText,time,callback){  this.$store.dispatch('showToast',{toastText,time,callback}) },
    hideToast (){  this.$store.dispatch('hideToast') }
  }
}
</script>

<style>
</style>
